<!--
 * @Description: 
 * @Author: Devin
 * @Date: 2021-11-05 15:14:13
 * @LastEditTime: 2022-04-18 17:03:34
 * @LastEditors: Devin
 * @Reference: 
-->
<template>
  <div class="components">
    <div class="left">
      <el-card id="普通输入框">
        <template #header>
          <div class="el-card-header">普通输入框</div>
          <div class="el-card-header-tip">自动失去焦点去除首位空格</div>
        </template>
        <CcInput v-model="data" size="small" style="margin-bottom: 20px" @blur="blur" @input="input" />
        <CcInput v-model="data" style="margin-bottom: 20px" />
        <CcInput v-model="data" size="large" />
        <Code><div v-html="code.code"></div></Code>
      </el-card>
      <el-card id="复合型输入框">
        <template #header>
          <div class="el-card-header">复合型输入框</div>
          <div class="el-card-header-tip">添加前缀或后缀元素，通常是标签或按钮。</div>
        </template>
        <CcInput v-model="data" size="small" style="margin-bottom: 20px">
          <template #prepend>Http://</template>
        </CcInput>
        <CcInput v-model="data" style="margin-bottom: 20px">
          <template #append>.com</template>
        </CcInput>
        <CcInput v-model="data" size="large">
          <template #prepend>Http://</template>
          <template #append>.com</template>
        </CcInput>
        <Code><div v-html="code.code1"></div></Code>
      </el-card>
      <el-card id="多行文本输入框">
        <template #header>
          <div class="el-card-header">多行文本输入框</div>
          <div class="el-card-header-tip">改变了一些默认属性值，其余没做修改。</div>
        </template>
        <CcTextarea v-model="data1" />
        <Code><div v-html="code.code2"></div></Code>
      </el-card>
    </div>
    <div class="right"><CcAnchor :sections="sections" :offset="120" width="150px"> </CcAnchor></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import code from './code';

export default defineComponent({
  setup() {
    let state = reactive({
      data: '',
      data1: '',
      data2: '',
      code,
      sections: [{ label: '普通输入框' }, { label: '复合型输入框' }, { label: '多行文本输入框' }]
    });
    const blur = (e: any) => {
      console.log(e);
    };
    const input = (e: any) => {
      console.log(e);
    };
    return { ...toRefs(state), blur, input };
  }
});
</script>

<style scoped></style>
